<template>
  <div class="carnbon-container">

    <el-breadcrumb separator="/" style="padding:0 20px 10px">
      <el-breadcrumb-item>基础信息</el-breadcrumb-item>
      <el-breadcrumb-item :to="'/carbon/monitoring/index'">监控点配置</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="search-form">
      <el-form inline :model="searchFromData">
        <el-form-item label="主体" prop="list">
          <el-select v-model="searchFromData.list" placeholder="请选择主体">
            <el-option v-for="(op, oIndex) in ['周口市中医院']"  :key="op" :label="op" :value="op" />
          </el-select>
        </el-form-item>
        <el-form-item label="监控点编号" prop="code">
          <el-input v-model.trim="searchFromData.code" placeholder="请输入监控点编号" />
        </el-form-item>
        <el-form-item label="监控点类型" prop="realPoint">
          <el-select v-model="searchFromData.realPoint" placeholder="请选择监控点类型">
            <el-option v-for="(op, oIndex) in ['虚拟','真实']"  :key="op" :label="op" :value="op" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="name">
          <el-select v-model="searchFromData.realPoint" placeholder="请选择状态">
            <el-option v-for="(op, oIndex) in ['停用','启用']"  :key="op" :label="op" :value="op" />
          </el-select>
        </el-form-item>
        <el-button @click="onReset">清除</el-button>
        <el-button class="saveBtn" type="primary" @click="onSearchClicked">查询</el-button>
      </el-form>
    </div>

    <div class="list">
      <CustomTableThird
              id="authList"
              class="auth-list"
              ref="monitoringTable"
              :table-config="tableConfig"
              :is-show-pagination="true"
              :search-callback="searchCallback"
              :is-refresh="isRefresh"
              :isShowSelect="false"
      >
      </CustomTableThird>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { appAuthList, appBacthPass, appDeny, appPass } from '@/ajax/index';
  import CustomTableThird from '@/components/CustomTableThird.vue';
  import { dateFormat, FormatsEnums } from '@/utils/dateUtil';
  import { getCurrentInstance, ref } from 'vue';
  import { useRouter } from 'vue-router';
  const { ctx , proxy } = getCurrentInstance() as any;
  const activeName = ref('authApply')
  const checkedRows = ref([])

  let router = useRouter()

  const tableConfig = ref({})
  const isRefresh = ref(false)

  const searchFromData = ref({
    name:'',
    projectId:''
  })

  //type：0-全部授权 1-授权通过
  const submit = (type: number, data: any) => {
    const msgLabel = {
      0: "全部授权通过",
      1: "通过"
    }
    ElMessageBox.confirm(
      `确定要${msgLabel[type]}吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(async () => {
      let res = {
        succ: false
      }
      if (type == 0) {
        res = await appBacthPass({})
      }
      if (type == 1) {
        res = await appPass({id: data.id})
      }
      if (res.succ) {
        ElMessage({
          type: 'success',
          message: '操作成功',
        })
        isRefresh.value = true
        nextTick(()=>{
          isRefresh.value = false
        })
      }
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '您已取消操作',
      })
    })
  }



  const onReset = (row: any) => {
  }

  const go = (path: string) => {
    router.push({
      name:path
    })
  }

  const statusMap = {
    approved: "已通过",
    declined: "已驳回",
    // requesting: "请求中",
  }
  tableConfig.value = {
    // 表格顶部的操作按钮
    'actionBtns': [
      {
        type: `primary`, // 按钮类型
        label: `结构视图管理`, // 按钮展示的文字
        isRefresh: false, // 执行完事件是否刷新页面
        btnCallback: ()=>{
          router.push({path:"/carbon/monitoring/view"})
        } // 事件回调
      },
      {
        type: `primary`, // 按钮类型
        label: `总监控点配置`, // 按钮展示的文字
        isRefresh: false, // 执行完事件是否刷新页面
        btnCallback: ()=>{
          router.push({path:"/carbon/monitoring/config"})
        } // 事件回调
      },
      {
        type: `primary`, // 按钮类型
        icon: `Plus`, // 按钮上的图标
        label: `添加监控点`, // 按钮展示的文字
        isRefresh: false, // 执行完事件是否刷新页面
        btnCallback: ()=>{
          router.push({path:"/carbon/monitoring/addPoint"})
        } // 事件回调
      }
    ],
    // 是否隐藏序号列
    'isHiddenIndex': {
      'type': false,
      'required': false,
      'default': false
    },
    'isRefresh': false,
    // 表格展示配置
    'tableHeader': [
      {
        label: '监控点编号',		// 是否隐藏序号列
        prop: 'code',
        width:'300px'
      },
      {
        label: '监控点名称',
        prop: 'name',
        width:'300px'
      },
      {
        label: '监控点类型',
        width:'160px',
        innerHTML: (row: any) => {
          return `${row.realPoint ? ('<span>真实</span>'):('<span>虚拟</span>')}`
        }
      },
      {
        label: '	监控点能源配置状态',
        prop: 'energyStatus',
        width:'160px',
        innerHTML: (row: any) => {
          return `${row.energyStatus ? ('<span class="aready-btn">已配置</span>'):('<span  class="aready-btn">未配置</span>')}`
        }
      },
      {
        label: '	监控点碳配置状态',
        prop: 'carbonStatus',
        width:'160px',
        innerHTML: (row: any) => {
          return `${row.carbonStatus ? ('<span class="aready-btn">已配置</span>'):('<span  class="aready-btn">未配置</span>')}`
        }
      },
      {
        label: '	状态',
        prop: 'inUse',
        width:'160px',
        innerHTML: (row: any) => {
          return `${row.inUse ? ('<span class="aready-btn">启用</span>'):('<span  class="aready-btn">停用</span>')}`
        }
      },
      {
        label: '操作',
        prop: 'id',
        fixed:  'right',
        btns: [
          {
            label: '编辑',
            btnCallback: (row) => {
              router.push({path:`/carbon/monitoring/editPoint`,query:{id:`${row.id}`}})
            }
          },
          {
            label: '删除',
            btnCallback: (row) => {
              console.log('row',row);
              ElMessageBox.confirm(
                `确定要删除吗？`,
                '提示',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                }
              ).then(async () => {
                console.log('ctx.$refs.monitoringTable',ctx.$refs.monitoringTable);
                ctx.$refs.monitoringTable.tableData.splice(row.$index,1)
              }).catch(() => {
                ElMessage({
                  type: 'info',
                  message: '您已取消操作',
                })
              })
            }
          }
        ],
      },
    ],

  }
  const operatorMap = {
    all: "全部"
  }

  const searchCallback = async () => {
    const params = {
      pageNumber:1,
      pageSize:1000
    }
    try {
      const res = await appAuthList(params)
      let list = res.content.data.requests || []
      console.log('list',list);
      if (!res.succ) {
        return
      }
      list = [
        {"id":74,"projectId":1,"project":null,"name":"住院部一层科室","realPoint":true,"code":"030303","property":null,"inUse":false,"energyStatus":true,"carbonStatus":true},{"id":73,"projectId":1,"project":null,"name":"住院部二层科室","realPoint":true,"code":"005","property":null,"inUse":false,"energyStatus":true,"carbonStatus":true},{"id":72,"projectId":1,"project":null,"name":"其他","realPoint":true,"code":"323","property":null,"inUse":false,"energyStatus":true,"carbonStatus":true},{"id":71,"projectId":1,"project":null,"name":"T1","realPoint":true,"code":"233","property":null,"inUse":true,"energyStatus":true,"carbonStatus":true},{"id":70,"projectId":1,"project":null,"name":"C1","realPoint":true,"code":"3333","property":null,"inUse":true,"energyStatus":true,"carbonStatus":true},{"id":68,"projectId":1,"project":null,"name":"主诊楼","realPoint":true,"code":"cs001","property":null,"inUse":true,"energyStatus":true,"carbonStatus":true},{"id":67,"projectId":1,"project":null,"name":"11111","realPoint":true,"code":"12345","property":null,"inUse":true,"energyStatus":true,"carbonStatus":false},{"id":59,"projectId":1,"project":null,"name":"呼吸科","realPoint":false,"code":"11086","property":null,"inUse":true,"energyStatus":true,"carbonStatus":true},{"id":54,"projectId":1,"project":null,"name":"TR2","realPoint":true,"code":"0036","property":null,"inUse":true,"energyStatus":true,"carbonStatus":false},{"id":53,"projectId":1,"project":null,"name":"TR1","realPoint":true,"code":"TR1","property":null,"inUse":true,"energyStatus":true,"carbonStatus":false}
      ]
      for (let index = 0; index < list.length; index++) {
        const element = list[index];
        list[index].request_time_text = dateFormat(element.request_time, FormatsEnums.YMDHI)
        list[index].operator_text = operatorMap[element.operator] || ''
        list[index].is_copyable_text = element.is_copyable ? '是' : '否'
      }
      return {
        "success": true,
        "message": "string",
        "content": {
          "size": 10,
          "records": list,
          "current": 1,
          "pages": 1,
          "total": 7
        }
      }
    } catch (error) {
      console.log("error", error)
    }

    // return {
    //     "success": true,
    //     "message": "string",
    //     "content": {
    //         "size": 0,
    //         "records": tableData,
    //         "current": 0,
    //         "pages": 0,
    //         "total": 0
    //     },
    //     "options": {
    //         "additionalProp1": {},
    //         "additionalProp2": {},
    //         "additionalProp3": {}
    //     }
    // }
  }

  const created = () => {

  }

</script>
<style lang="scss" scoped>
  .space-auth-container {

  }
</style>
<style lang="scss">
  .space-auth-status-tip {
    max-width: 300px;
  }
  .space-auth-container {
    .auth-list {
      .top {
        padding: 0;
      }
      .tableCon {
        line-height: 20px;
        padding: 15px 0 0 0;
        th {
          background-color: #F3F4F6 !important;
          color: #94979E !important;
        }
      }
      .el-table th.el-table__cell>.cell{
        font-size: 12px !important;
        font-weight: 500;
        color: #94979E;
      }
      .el-table td.el-table__cell>.cell{
        font-size: 13px;
        font-weight: 400;
        color: #343333;
      }
      .el-button.el-button--text {
        font-size: 13px;
        font-weight: 400;
        color: #088D9E;
      }
    }
  }
</style>